<template>
	<view class="register">
		<view class="back" @click="gotoLogin()">
			<image src="../../static/index/leftarrow.png" mode="" style="width: 32rpx;
		height:32rpx;"></image>
		</view>
		<view class="logobox">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view class="registerform f14">
			<view class="formitem fcs border-bottom">
				<view class="textr f14">昵称</view>  <input class="f14" type="text"   maxlength="18" placeholder="请输入昵称" v-model="nikeName" />
			</view>
			<view class="formitem fcs border-bottom">
				<view class="textr f14">+86</view><input class="f14" type="number"  maxlength="11" placeholder="请输入手机号" v-model="tel" /><button :class="!btnfalse?'buttonable':'buttondisable'" :disabled="btnfalse" @click="getCode()">{{codeText}}</button>
			</view>
			<view class="formitem fcs border-bottom">
				<view class="textr f14">验证码</view> <input :disabled="intdisabled" type="number" class="f14" maxlength="6" placeholder="请输入短信验证码" v-model="code" />
			</view>
			<view class="formitem fcs border-bottom">
				<view class="textr f14">登录密码</view> <input :disabled="intdisabled" :type="logstate?'text':'password'"  class="f14 inputhez"  placeholder="请输入登录密码" v-model="loginpassword" />		<image :src="logstate ? '../../static/closeeye.png' : '../../static/openeye.png'" style="width:36rpx ;height:36rpx ;margin-left: 64rpx;position: absolute;
			    right: 0;" @click="eyesin('logstate')"></image>
				
			</view>
			<view class="formitem fcs border-bottom">
				<view class="textr f14">支付密码</view> <input :disabled="intdisabled"  :type="logpaystate?'text':'password'" class="f14 inputhez" maxlength="6" placeholder="请输入支付密码" v-model="payword" />		<image :src="logpaystate ? '../../static/closeeye.png' : '../../static/openeye.png'" style="width:36rpx ;height:36rpx ;margin-left: 64rpx;position: absolute;
			    right: 0;" @click="eyepaysin('logpaystate')"></image>
			</view>
			<view class="formitem fcs border-bottom">
				<view class="textr f14">邀请码</view>  <input type="text"  class="f14" maxlength="18" placeholder="请输入邀请码" v-model="invitecode" />
			</view>
			<view class="loginbox f18" @click="register">
				注册
			</view>
			<view class="gologinbox f13">
				<view class="" style="margin-right: 20rpx;">
					已有账号?
				</view>
				<view class="login" @click="gotoLogin">
					<view style="margin-right: 20rpx;">
						去登录
					</view>
					<image src="../../static/bluearrow.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				nikeName:"",
				tel:'',
				code:"",
				loginpassword:"",
				payword:"",
				invitecode:"",
				disabled: false,
				codeText:"获取验证码",
				btnfalse: false,
				intdisabled: false, //点击验证码才能输入下面的密码支付密码
				count:60,
				logstate: false,
				logpaystate:false
				
			}
		},
		onLoad() {
		},
		methods:{
			eyesin(state) {
				if (state == 'logstate') {
					this.logstate = !this.logstate;
				} else {
					this.passtate = !this.passtate;
				}
			},
			eyepaysin(state){
				if (state == 'logpaystate') {
					this.logpaystate = !this.logpaystate;
				} else {
					this.logpaystate = !this.logpaystate;
				}
			},
		 gotoLogin(){
				// console.log(11)
				uni.reLaunch({
					url:"../login/index"
				})
			},
			getCode(){
				var that=this
				if (!that.nikeName) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return false;
				}
				if (!that.tel) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}
			
					let params = {
						phone:that.tel
					};
					
				that.$http.post('login.registerCode',params,{ isAuth: false, tipConfig: { isLoading: false } }).then(res=>{

					// cosnsole.log(res)
					that.disabled = true;
					that.intdisabled = false;
					that.btnfalse = true;
					clearInterval(that.time);
					that.time = setInterval(() => {
						that.count -= 1;
						that.codeText = that.count + 's后获取';
						if (that.count === 0) {
							that.count = 60;
							that.disabled = false;
							that.btnfalse = false;
							that.codeText = '获取验证码';
							clearInterval(that.time);
						}
					}, 1000);
				})

			},
		async register(){
				if (this.nikeName == '') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return false;
				}
				if(!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(this.tel)){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}
				if (this.code == '') {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					});
					return false;
				}
				if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.loginpassword)) {
					uni.showToast({
						title: '请输入最少8位字母+数字',
						icon: 'none'
					});
					return false;
				}
				if ([...this.payword].length != 6) {
					uni.showToast({
						title: '支付密码需为6位',
						icon: 'none'
					});
					return false;
				}
				let params = {
					nikeName: this.nikeName,
					phone:this.tel,
					verificationCode:this.code,
					loginPwd:this.loginpassword,
					payPwd:this.payword,
					inviteCode: this.invitecode
				};
				// let { data } = await this.$http.post('login.registered', params, { isAuth: false, tipConfig: { isLoading: false } });
			let { data } =await this.$http.post('login.register',params,{ isAuth: false, tipConfig: { isLoading: false } })
				uni.setStorageSync('token', data.token)
				uni.showToast({
					title: '注册成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '../bindemail/bindemail'
					});
				}, 500);
			}
		},
		
	}
	
</script>

<style lang="less">
	.inputhez{
		border: none;
		outline: none;
	}
	.register{
		margin-top: 40rpx;
		.back{
			font-size: 40rpx;
			margin-left: 30rpx;
			font-weight: 800;
		}
		.logobox{
			margin-top: 46rpx;
			margin-left: auto;
			margin-right: auto;
			width: 204rpx;
			height: 278rpx;
			image{
				width:204rpx;
				height: 278rpx;
			}
		}
		.registerform{
			margin-top: 88rpx;
			padding: 0 30rpx;
		}
		.buttonable{
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			opacity: 1;
			background: #1372df;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #fff;
			position: absolute;
			    right: 0;
				padding: 0;
		}
		.buttondisable{
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			opacity: 1;
			background: rgba(239,239,239,1);
			border-radius: 8rpx;
			font-size: 24rpx;
			color: rgba(109,114,120,1);
			position: absolute;
			    right: 0;
				padding: 0;
		}
		input{
			width: 310rpx;
			// border: none !important;
		}
		.gologinbox{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 60rpx;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			width: 340rpx;
			font-size: 26rpx;
			padding-bottom: 40rpx;      
			.login{
				display: flex;
				font-size: 26rpx;
				justify-content: space-between;
				align-items: center;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				color: #1372DF;
				
			}
			image{
				width: 12rpx;
				height: 16rpx;
			}
		}
		
	}
</style>
